import { Component } from 'react'
import { BASE_URL } from '../../utils/url'

import { Grid, Toast, Modal } from 'antd-mobile'

import { isAuth, delToken } from '../../utils/auth'

import styles from './index.module.css'

import { API } from '../../utils/api'

const menus = [
  {id: 1, name: '我的收藏', iconfont: 'icon-coll', to: '/favorite'},
  {id: 2, name: '我的出租', iconfont: 'icon-ind', to: '/rent'},
  {id: 3, name: '看房记录', iconfont: 'icon-record'},
  {id: 4, name: '成为房主', iconfont: 'icon-identity'},
  {id: 5, name: '个人资料', iconfont: 'icon-myinfo'},
  {id: 6, name: '联系我们', iconfont: 'icon-cust'},
]

// 默认头像
const DEFAULT_AVATAR = BASE_URL + '/img/profile/avatar.png'

export default class Profile extends Component {
  state = {
    isLogin: isAuth(),
    userInfo: {}
  }

  getUserInfo = async () => {
    if (!this.state.isLogin) {
      return 
    }
    let res = await API.get('/user')
    if (res.data.status === 200) {
      this.setState({
        userInfo: res.data.body
      })
    } else {
      // token失效
      this.setState({
        isLogin: false
      })
    }
  }

  logout = () => {
    Modal.alert('退出登录', '是否退出当前登录账号？', [
      { text: '取消', onPress: () => {return null} },
      { text: '确定', onPress: async () => {
        let res = await API.post('/user/logout')
        delToken();
        this.setState({
          isLogin: false
        })
      }},
    ])
  }

  componentDidMount() {
    this.getUserInfo()
  }

  render() {
    const { isLogin, userInfo } = this.state
    return (
      <div className={styles.profile}>
        {/* 头部展示用户头像昵称等 */}
        <div className={styles.header}>
          <img className={styles.bg} src={BASE_URL + '/img/profile/bg.png'} alt=""/> 
          {
            isLogin ? 
            (<div className={styles.userBox}>
              <div className={styles.avatar}>
                <img className={styles.avatarImg} src={BASE_URL + userInfo.avatar} alt=""/>
              </div>
              <span className={styles.user}>{userInfo.nickname}</span>
              <div className={styles.loginOut}>
                <button className={styles.button} onClick={() => {
                  this.logout()
                }}>退出</button>
              </div>
              <div className={styles.edit} onClick={() => {this.props.history.push('/edit')}}>
                编辑个人资料
                <i className={['iconfont icon-arrow', styles.i].join(' ')} />
              </div>
            </div>) : 
            (
              <div className={styles.userBox}>
                <div className={styles.avatar}>
                  <img className={styles.avatarImg} src={DEFAULT_AVATAR} alt=""/>
                </div>
                <span className={styles.visitor}>游客</span>
                <button className={styles.button} onClick={() => {this.props.history.push('/login')}}>去登录</button>
              </div>
            
            )
          }
        </div>

        {/* 展示grid布局菜单 */}
        <div className={styles.body}>
          <Grid 
            data={menus} 
            columnNum={3} 
            hasLine={false}
            renderItem={dataItem => (
              <div style={{ padding: '12.5px' }} onClick={dataItem.to ? () => {this.props.history.push(dataItem.to)} : () => {Toast.info('功能开发中，敬请期待...', 1)}}>
                <i className={`iconfont ${dataItem.iconfont}`} style={{ width: '75px', height: '75px' }}/>
                <div style={{ color: '#333', fontSize: '14px', marginTop: '12px' }}>
                  <span>{dataItem.name}</span>
                </div>
              </div>
            )}
          />
        </div>
        {/* 展示加入我们图片 */}
        <div className={styles.footer}>
          <img className={styles.img} src={BASE_URL + '/img/profile/join.png'} alt="" />
        </div>
      </div>
    )
  }
}